<template>
	<div>
		<div id="header">
			<div class="back" v-on:click='gotomovieList()'></div>
			<h2 class="header-title">{{Comments.subject.title}}</h2>
		</div>
		<div id="comments">
			<div class="comments_detail" v-for="comment in Comments.comments">
				<div class="rating">
					<span class="stars">{{comment.rating.value}}</span>
					<span class="date">{{comment.created_at}}</span>
				</div>
				<p>{{comment.content}}</p>
				<div class="author">
					<img v-bind:src="comment.author.avatar">
					<span>{{comment.author.name}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				Comments:{
					
				}
			}
		},
		mounted:function(){
			var id = this.$route.params.id;
			this.$http.jsonp("https://api.douban.com/v2/movie/subject/"+id+"/comments?apikey=0b2bdeda43b5688921839c8ecb20399b"
			).then(function(response){
  		    		this.Comments=response.body
			})
		},
		methods:{
		    gotomovieList:function(){
		      this.$router.go(-1)
		    }
		  }
	}
</script>

<style scoped>
	.wrapper{
		background-color: #e5e9f2;
	}
	#header{
		display: flex;
	    height: 50px;
	    width: 100%;
	    background-color: #e54847;
	    padding: 6px;
	    box-sizing: border-box;
	    position: relative;
	}
	#header .back{
		position: absolute;
		top: 18px;
		left: 15px;
		height: 13px;
	    width: 13px;
	    border: 2px solid #fff;
	    border-width: 0 0 2px 2px;
	    transform: rotate(45deg);
	}
	#header h2{
		margin: auto;
		color: #fff;
    	font-size: 20px;
	}
	#comments{
		font-size: 12px;
	}
	#comments .comments_detail{
		padding: 20px 0 10px;
		border-bottom: 1px solid #d6d3d3;
		margin:0 10px;
		line-height: 15px;
	}
	#comments .comments_detail p{
		color: #333;
	    margin-bottom: 10px;
	    margin-top: 10px;
	}
	#comments img{
		border-radius: 50%;
	}
	.author{
		display: flex;
		margin-bottom: 5px;
	}
	.author span{
		margin-left: 10px;
		line-height: 48px;
		color: #999;
	}
</style>